<template>
  <div class="customize-page">
    <page-banner title="私人定制" subtitle="为您量身打造专属川西旅行体验" />

    <!-- 优化特色服务区域 -->
    <div class="features-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">为什么选择我们</h2>
        </div>
        <div class="features-grid">
          <div
            v-for="(feature, index) in features"
            :key="index"
            class="feature-card"
            :class="`feature-${index + 1}`"
          >
            <div class="feature-icon-wrapper">
              <el-icon class="feature-icon">
                <component :is="iconComponents[feature.icon]" />
              </el-icon>
            </div>
            <div class="feature-content">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.desc }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改定制流程展示 -->
    <div class="process-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">定制流程</h2>
        </div>
        <div class="process-timeline">
          <div
            v-for="(step, index) in steps"
            :key="index"
            class="process-step"
            :class="{ active: index === currentStep }"
            @mouseenter="currentStep = index"
          >
            <div class="step-icon" :style="getStepIconStyle(index)">
              {{ index + 1 }}
            </div>
            <div class="step-content">
              <h3>{{ step.title }}</h3>
              <p>{{ step.desc }}</p>
            </div>
            <div class="step-arrow" v-if="index < steps.length - 1">
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 优化表单区域布局 -->
    <div class="form-section">
      <div class="container">
        <div class="form-wrapper">
          <div class="form-content">
            <div class="form-header">
              <h2>开启您的定制之旅</h2>
              <p class="form-subtitle">
                填写以下信息，我们将为您量身定制完美行程
              </p>
            </div>
            <el-form
              :model="form"
              :rules="rules"
              ref="formRef"
              label-position="top"
              size="large"
              class="custom-form"
            >
              <!-- 在出行天数和预算之间添加目的地选择 -->
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名" prop="name">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入您的姓名"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码" prop="phone">
                    <el-input
                      v-model="form.phone"
                      placeholder="请输入您的手机号码"
                    />
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="出行天数" prop="duration">
                    <el-select
                      v-model="form.duration"
                      placeholder="请选择出行天数"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="d in durations"
                        :key="d.value"
                        :label="d.label"
                        :value="d.value"
                      >
                        <span>{{ d.label }}</span>
                        <span class="option-tips">{{ d.tips }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="预算范围" prop="budget">
                    <el-select
                      v-model="form.budget"
                      placeholder="请选择预算范围"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="b in budgets"
                        :key="b.value"
                        :label="b.label"
                        :value="b.value"
                      >
                        <span>{{ b.label }}</span>
                        <span class="option-tips">{{ b.tips }}</span>
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-form-item label="期望出行时间" prop="travelDate">
                <el-date-picker
                  v-model="form.travelDate"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :disabledDate="disabledDate"
                  style="width: 100%"
                />
              </el-form-item>

              <el-form-item label="定制需求" prop="requirements">
                <el-input
                  v-model="form.requirements"
                  type="textarea"
                  rows="4"
                  placeholder="请描述您的具体需求，如行程偏好、住宿要求等"
                />
              </el-form-item>

              <div class="form-actions">
                <el-button
                  type="primary"
                  @click="submitForm()"
                  :loading="submitting"
                  class="submit-btn"
                >
                  <el-icon><Check /></el-icon>
                  提交定制需求
                </el-button>
                <el-button @click="resetForm()" class="reset-btn">
                  <el-icon><RefreshRight /></el-icon>
                  重置
                </el-button>
              </div>
            </el-form>
          </div>

          <div class="team-section">
            <div class="team-header">
              <el-icon><UserFilled /></el-icon>
              <h3>专业定制团队</h3>
            </div>
            <div class="team-members">
              <div
                v-for="member in teamMembers"
                :key="member.id"
                class="team-member"
              >
                <div class="member-avatar">
                  <img :src="member.avatar" :alt="member.name" />
                </div>
                <div class="member-info">
                  <h4>{{ member.name }}</h4>
                  <p>{{ member.title }}</p>
                </div>
              </div>
            </div>
            <div class="contact-info">
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <span>咨询电话：400-888-8888</span>
              </div>
              <div class="contact-item">
                <el-icon><Clock /></el-icon>
                <span>服务时间：09:00-21:00</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import PageBanner from "@/components/PageBanner.vue";
import { ref, reactive, computed, onMounted } from "vue";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { ElMessage, ElLoading } from "element-plus";
import {
  getCustomizeOptions,
  getCustomizeTeam,
  submitCustomRequest,
} from "@/api/customize"; // 修改导入路径

// 添加日期验证导入
import { validateDate } from '@/utils/validate';

// 创建图标组件对象
const iconComponents = {};
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  iconComponents[key] = component;
}

// 表单引用
const formRef = ref(null);

// 表单数据
const form = reactive({
  name: "",
  phone: "",
  peopleCount: 2,
  duration: "",
  budget: "",
  travelDate: "",
  requirements: "",
  destination: "", // 添加目的地字段
});

// 选项数据
const durations = ref([]);
const budgets = ref([]);
const destinations = ref([]); // 添加目的地选项

// 团队成员数据
const teamMembers = ref([]);

// 表单验证规则
const rules = reactive({
  name: [{ required: true, message: "请输入您的姓名", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入您的手机号码", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "请输入正确的手机号码格式",
      trigger: "blur",
    },
  ],
  peopleCount: [
    { required: true, message: "请选择出行人数", trigger: "change" },
    { type: "number", min: 1, message: "人数不能小于1", trigger: "change" },
  ],
  duration: [{ required: true, message: "请选择出行天数", trigger: "change" }],
  budget: [{ required: true, message: "请选择预算范围", trigger: "change" }],
  travelDate: [
    { required: true, message: "请选择期望出行时间", trigger: "change" },
    { validator: validateDate, trigger: "change" },
  ],
  destination: [{ required: true, message: "请选择意向目的地", trigger: "change" }],
});

// 禁用过去的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
};

// 初始化选项数据
const initOptions = async () => {
  const loadingInstance = ElLoading.service({
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.7)'
  });
  
  try {
    const response = await getCustomizeOptions();
    if (response) {
      durations.value = response.durations || [];
      budgets.value = response.budgets || [];
      destinations.value = response.destinations || [];
    }
  } catch (error) {
    console.error("获取定制选项失败:", error);
    ElMessage.error("获取定制选项失败，请稍后重试");
  } finally {
    loadingInstance.close();
  }
};

// 获取团队信息
const fetchTeamInfo = async () => {
  try {
    const response = await getCustomizeTeam();
    if (response) {
      teamMembers.value = response;
    }
  } catch (error) {
    console.error("获取团队信息失败:", error);
    ElMessage.error("获取团队信息失败，请稍后重试");
  }
};

// 修改生命周期钩子调用顺序
onMounted(async () => {
  await Promise.all([initOptions(), fetchTeamInfo()]);
});

// 定义特色服务数据
const features = ref([
  { icon: "Calendar", title: "灵活时间", desc: "根据您的档期自由安排行程" },
  { icon: "Location", title: "专属路线", desc: "私人订制独特的旅行体验" },
  { icon: "Service", title: "专业服务", desc: "全程专业团队贴心服务" },
  { icon: "Trophy", title: "品质保障", desc: "甄选优质酒店及用车服务" }
]);

// 定义定制流程数据
const steps = ref([
  { title: "提交需求", desc: "填写您的旅行需求" },
  { title: "方案定制", desc: "专业定制师量身规划" },
  { title: "方案确认", desc: "沟通确认行程细节" },
  { title: "完成预订", desc: "预订并确保行程顺利" }
]);

// 提交表单
const submitting = ref(false);

const submitForm = async () => {
  if (!formRef.value) return;
  
  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage.warning("请完善表单信息");
      return;
    }
    
    submitting.value = true;
    
    // 处理日期格式
    let formattedData = { ...form };
    if (form.travelDate && Array.isArray(form.travelDate)) {
      formattedData.startDate = form.travelDate[0];
      formattedData.endDate = form.travelDate[1];
      delete formattedData.travelDate;
    }
    
    try {
      const loadingInstance = ElLoading.service({
        text: '提交中...',
        background: 'rgba(255, 255, 255, 0.7)'
      });
      
      const response = await submitCustomRequest(formattedData);
      // console.log("提交定制需求响应:", response);
      loadingInstance.close();
      
      if (response) {
        ElMessage.success("定制需求提交成功，我们的顾问将尽快与您联系");
        resetForm();
      }
    } catch (error) {
      console.error("提交定制需求失败:", error);
      ElMessage.error("提交失败，请稍后重试");
    } finally {
      submitting.value = false;
    }
  });
};

const resetForm = () => {
  if (!formRef.value) return;
  formRef.value.resetFields();
};

// 添加当前激活的步骤状态
const currentStep = ref(0);

// 添加步骤图标样式函数
const getStepIconStyle = (index) => {
  const colors = [
    { bg: "#1890ff", shadow: "rgba(24, 144, 255, 0.2)" },
    { bg: "#52c41a", shadow: "rgba(82, 196, 26, 0.2)" },
    { bg: "#722ed1", shadow: "rgba(114, 46, 209, 0.2)" },
    { bg: "#fa8c16", shadow: "rgba(250, 140, 22, 0.2)" },
  ];
  const style = colors[index % colors.length];
  return {
    background: style.bg,
    boxShadow: `0 5px 15px ${style.shadow}`,
  };
};
</script>

<style scoped>
/* 重置基础样式 */
.customize-page {
  background: var(--light-bg);
}

/* 服务特色区域样式优化 */
.features-section {
  padding: 40px 0;
  background: linear-gradient(to bottom, white, var(--light-bg));
}

.section-header {
  text-align: center;
}

.section-title {
  font-size: 28px;
  font-weight: 600;
  color: var(--text-color);
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background: var(--primary-color);
  border-radius: 3px;
}

.features-grid {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 20px 0;
}

.feature-card {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), #36cfc9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon-wrapper {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light-bg);
  transition: all 0.3s ease;
}

.feature-icon {
  font-size: 30px;
  color: var(--primary-color);
}

.feature-content h3 {
  font-size: 18px;
  color: var(--text-color);
  margin-bottom: 12px;
}

.feature-content p {
  font-size: 14px;
  color: var(--text-color-secondary);
  line-height: 1.6;
}

/* 定制流程样式优化 - 改为横向布局 */
.process-section {
  padding: 20px 0;
  background: linear-gradient(180deg, white 0%, var(--light-bg) 100%);
}

.process-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 15px 0;
}

.process-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 0 10px;
}

.step-icon {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.step-content {
  max-width: 200px;
}

.step-content h3 {
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--text-color);
}

.step-content p {
  font-size: 14px;
  color: var(--text-color-secondary);
  margin: 0;
  line-height: 1.5;
}

/* 添加步骤连接线 */
.step-arrow {
  position: absolute;
  top: 25px;
  right: -12px;
  color: var(--primary-color);
  font-size: 20px;
  z-index: 2;
}

.process-step.active .step-icon {
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 表单区域样式优化 */
.form-section {
  padding: 60px 0;
}

.form-wrapper {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.form-content {
  background: white;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.form-header {
  text-align: center;
  margin-bottom: 20px;
}

.form-header h2 {
  font-size: 32px;
  color: var(--text-color);
  margin-bottom: 10px;
}

.form-subtitle {
  color: var(--text-color-secondary);
  font-size: 16px;
}

/* 团队展示区样式优化 */
.team-section {
  background: white;
  border-radius: 24px;
  padding: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.team-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--border-color);
}

.team-header .el-icon {
  font-size: 24px;
  color: var(--primary-color);
}

.team-header h3 {
  font-size: 20px;
  color: var(--text-color);
  margin: 0;
}

.team-member {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.team-member:hover {
  background: var(--light-bg);
  transform: translateX(5px);
}

.member-avatar img {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  object-fit: cover;
}

.member-info h4 {
  font-size: 16px;
  color: var(--text-color);
  margin: 0 0 5px;
}

.member-info p {
  font-size: 14px;
  color: var(--text-color-secondary);
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .form-wrapper {
    grid-template-columns: 1fr 300px;
    padding: 0 20px;
  }
}

@media (max-width: 992px) {
  .form-wrapper {
    grid-template-columns: 1fr;
  }

  .team-section {
    position: static;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .features-grid {
    flex-direction: column;
  }

  .feature-card {
    padding: 25px;
  }

  .form-content,
  .team-section {
    padding: 25px;
    border-radius: 16px;
  }
}

/* 添加选项提示样式 */
.option-tips {
  float: right;
  color: var(--text-color-secondary);
  font-size: 0.9em;
}
</style>
